<template>
    <div class="top_tab">
        <p class="current-time">
            <span v-html="currentTime"></span>
            <span v-html="currentTimeYears"></span>
        </p>
        <ul class="header-menu">
            <!--<li :class="btns.situation.open?'menu-icon-active':''" @click="$emit('tabControl','situation')">
                <i class="iconfont icon-situation menu-icon"></i>
                <p>目标态势</p>
            </li>-->
            <li :class="btns.situation.open?'menu-icon-active':''" @click="$emit('tabControl','situation')">
                <i class="iconfont icon-situation menu-icon"></i>
                <p>航母编队</p>
            </li>
            <li :class="btns.list.open?' menu-icon-active':''" @click="$emit('tabControl','list')">
                <i class="iconfont icon-list menu-icon"></i>
                <p>实体列表</p>
            </li>
            <li :class="btns.status.open?'menu-icon-active':''" @click="$emit('tabControl','status')">
                <i class="iconfont icon-status menu-icon"></i>
                <p>实时状态</p>
            </li>
            <li :class="btns.timeline.open?'menu-icon-active':''" @click="$emit('tabControl','timeline')">
                <i class="iconfont icon-intention menu-icon"></i>
                <p>意图研判</p>
            </li>
            <li :class="btns.perception.open?'menu-icon-active':''" @click="$emit('tabControl','perception')">
                <i class="iconfont icon-event menu-icon"></i>
                <p>事件感知</p>
            </li>
<!--            <li :class="btns.connection.open?'menu-icon-active':''" @click="$emit('tabControl','connection')">
                <a target="_blank" @click="dataConnection('../../../../perception/index.html')" style="text-decoration: none;">
                &lt;!&ndash;<a target="_blank" @click="dataConnection('../../../../perception/index.html')" :href="'../../../../perception/index.html?ids=' + linkAttr " style="text-decoration: none;">&ndash;&gt;
                    <i class="iconfont icon-association menu-icon"></i>
                    <p>体系关联</p>
                </a>
            </li>-->
            <li :class="btns.connection.open?'menu-icon-active':''" @click="$emit('tabControl','connection','../../../perception/index.html')">
                <a style="text-decoration: none;">
                    <i class="iconfont icon-association menu-icon"></i>
                    <p>体系关联</p>
                </a>
            </li>
            <li :class="btns.need.open?'menu-icon-active':''" @click="$emit('tabControl','need')">
                <i class="iconfont icon-ai menu-icon"></i>
                <p>情报需求</p>
            </li>
            <li :class="btns.intelligence.open?'menu-icon-active':''" @click="$emit('tabControl','intelligence')">
                <i class="iconfont icon-shared-list menu-icon"></i>
                <p>情报共享</p>
            </li>
        </ul>
    </div>
</template>


<script>
    import storeData from './../../../tools/vuex-store';
    export default {
        name: "tab",
        components: {},
        props: ['btns', 'tabControl'],
        events: ['btns', 'tabControl'],
        data() {
            return {
                linkAttr: storeData.state.linkAttr,
                currentTime: '',
                currentTimeYears: ''
            }
        },
        mounted() {
            this.dataTime();
        },
        methods: {
            dataTime: function () {
                setInterval(()=>{
                    const date = new Date(),
                        dateSeconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                    this.currentTime = date.getHours() + ':' + date.getMinutes() + ':' + dateSeconds;
                    this.currentTimeYears = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getUTCDate();
                    // console.log(this.currentTime);
                }, 1000);
            },
            dataConnection: function (datalinkUrl) {
                window.open(`${datalinkUrl}?ids=${this.linkAttr}`, '体系界面');
            }
        }
    }
</script>

<style lang="less" type="text/less" scoped>
    @import "tab";
</style>